<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>创建组件</title>
    <script src="./lib/vue-2.4.0.js"></script>
    
    <style>
      .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }

        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease;
        }
    </style>
    </head>
    <body>
        <div id="app">
            <!-- 再被控制的区域 使用 template 元素 定义组件的模板结构  -->
            
            <!-- 如果要使用组件 直接把组件的名字 以标签形式引入即刻 -->
            <!-- 使用的时候 如果使用了驼峰命名 那就改成小写 然后加- 
            如果没有使用驼峰命名 则 不加-   -->
            <!-- <mycom1></mycom1> -->
            <!-- vue提供的component 来展示对应的组件 component 是一个占位符 :is属性 可以用来指定要展示的组件名称-->

             
            <a href="" @click.prevent="comName='login'">登
                录</a>
            <a href="" @click.prevent="comName='register'">注册</a>

            <!-- 通过 mode  设置组件切换时候的入场方式动画 -->
            <transition mode="in-out">
            <component :is="comName"></component>                
            </transition>

            <!-- 
                <a href="" @click.prevent="flag=true">登录</a>
            <a href="" @click.prevent="flag=false">注册</a>

                <login v-if="flag"></login>
                <register v-else="flag"></register> -->

        </div>

        <!-- <div id="app2"> -->
            <!-- <mycom1></mycom1> -->
            <!-- <login></login> -->
        <!-- </div> -->

        <!-- <template id="tmpl">
                <div>
                    <button @click="increment">点我</button>
                    <h1>{{ count }}</h1> -->
                    <!-- <h4>好{{msg}}用啊</h4> -->
                <!-- </div>
            </template> -->

            <!-- <template id="tmpl2">
                    <div>
                        <h1>222</h1>
                        <h4>222</h4>
                    </div>
                </template>
     -->
        <script>

            // 创建组件

            // 第一种方式
            // 1.1使用 Vue.extend 来创建全局Vue的组件
            // var com1 = Vue.extend({
                // template: '<h3>创建的组件</h3>' //通过template属性 指定了组件要展示的html结构
            // })
            // 1.2使用Vue.component('组件名称',创建出来的组件模板对象)

            // Vue.component('myCom1',com1)
            // Vue.component('mycom1',com1)

            // 第二种方法
            // 第一个参数 组件的名字 以后用的时候 就是一个标签来引入 第二个是 Vue.extend 创建的组件 其中 template 就是我们要展示的内容

            // Vue.component('mycom1',Vue.extend({
            //     template: '<h3>创建的组件</h3>'
            // }))
          

            // 第三种方法 精简
            
            // Vue.component('mycom1', {
                // 不论是那种方式 创建组件 组件的template 指向的模板内容 必须有且只能有唯一的一个根元素
            //     template: '<div><h3>创建的组件</h3><span>123</span></div>'
            // })

            // 第四种方法 
            // 组件可以有自己的 data数据 和实例的data 有些不一样 实例中的data可以为一个对象 但是组件中的data必须是一个方法 组建中的data 除了必须为一个方法之外 方法内部必须返回一个对象 组建中的data数据和实例中的使用方式一样
            // Vue.component('mycom1',{
            //     template: '#tmpl',
            //     data: function(){
            //         return{
            //             msg: '一个msg'
            //         }
            //     }
            // })

                // 计数器组件 身上有个按钮 点击data中的count加1
            // Vue.component('mycom1',{
            //     template: '#tmpl',
            //     data: function(){
            //         return {
            //             count: 0
            //         }
            //     },
            //     methods: {
            //         increment() {
            //             this.count++
            //         }
            //     }
            // })

            Vue.component('login',{
                template: '<h3>登录</h3>',
                
            })

            Vue.component('register',{
                template: '<h3>注册</h3>',
                
            })


            var vm = new Vue({
                el: '#app',
                data: {
                    comName: 'login',
                },
                methods:{

                }
            });



            
            // var vm2 = new Vue({
            //     el: '#app2',
            //     data: {

            //     },
            //     methods: {

            //     },
            //     components: {
            //         // 定义私有组件
            //         login: {
            //             template: '#tmpl2'
            //         }
            //     },

            // })
        </script>
    </body>
</html>